<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>  
    <button id='changeColor'>点击我变颜色</button>
    <button>点击我字体变大</button>
    <button>点击我添加背景色</button>
    <h1 >这是第一级标题</h1>
    <p  name="p_name">这是文章的内容</p>
    <h2>这是二级标题</h2>
    <p id='p_2'>这是第二段的文章的内容</p>
    <div>
        <p name="p_name">这是divn里<span></span>面的</p>内容
    </div> 
</body>
</html>
<script>
    //getElementById(  id的值 ) 返回单个元素-----------------------------
    //获得改变颜色的按钮
   //  let  changeColorObj = document.getElementById('changeColor');
    // console.log(changeColorObj);
    //let  p_2Obj = document.getElementById('p_2');
    //console.log(p_2Obj);

    //getElementsByTagName（元素的标签名），返回的是元素的集合--------------------------
    //获得所有的p元素的节点
     //let pList =  document.getElementsByTagName('p');
     //查询元素的个数
    // console.log(pList.length);
     //取出其中的2个p元素节点
    // let pObj = pList[2];
   //  console.log(pObj);

   //getElementsByName（name属性的名字)返回的是元素的集合-------------------
   // 注意： 该方法主要是针对表单元素的
    






</script>